<template>
  <div class="twoPage">
    <h3>keep-alive与component组合</h3>
    <keep-alive :include="['List']">
      <component
        :is="componentPage"
        @changeToKeep1="onChangeKeepLive"
        :params="params"
      >
      </component>
    </keep-alive>

    <h3>component第一种方法</h3>
    <component
      v-for="(item, index) in comListss"
      :key="item.id"
      :is="item.comps"
      :title="'第' + (index + 1) + '个'"
      @click.native="changeCom(item)"
      class="cursors"
    >
    </component>

    <h3>component第二种方法 el-tabs</h3>
    <el-tabs v-model="curName" @tab-click="tabHanler">
      <el-tab-pane
        v-for="(item, index) in comLists"
        :key="index"
        :name="item.name"
        :label="item.title"
        @click.native="changeComs(item)"
        class="cursors"
      >
        <component :is="item.comps" :title="item.title" />
      </el-tab-pane>
    </el-tabs>

    <h3>动态注册子组件</h3>
    <component
      v-for="(item, index) in apps"
      :key="index"
      :is="item.key"
      :title="'第' + (index + 1) + '个'"
      @click.native="changeCom(item)"
      class="cursors"
    >
    </component>

    <h3>动态注册子组件,tabs切换</h3>
    <el-tabs v-model="curentName" @tab-click="tabHanler">
      <el-tab-pane
        v-for="(item, index) in apps"
        :key="index"
        :name="item.index"
        :label="item.key"
      >
        <component :is="item.key" :title="item.key" />
      </el-tab-pane>
    </el-tabs>

    <h3>搜索注册的子组件</h3>
    <el-input
      v-model.trim="keyword"
      clearable
      @change="changeSearch"
      @input="inputSearch"
      @clear="keyword == ''"
      placeholder="请输入内容"
      class="width250"
    />

    <br />
    <div class="box">
      <div
        class="tabss"
        v-for="(items, v) in appsList.length > 0 ? appsList : apps"
        :key="items.key"
        :class="tabs == v ? 'active' : ''"
        @click="changTabs(v)"
      >
        {{ items.key }}
      </div>
    </div>

    <el-button type="success" plain @click="starBtn">开始定时器</el-button>

    <el-button type="success" plain @click="closeBtn">关闭定时器</el-button>

    <el-button type="info" plain @click="resetBtn">重置定时器</el-button>

    <div>{{ time }}</div>
  </div>
</template>

<script>
import { getInitTime } from '@/utils/utils.js'
// require.context('../mods', true, /\.(\/.+)\/App[^\/]+\.vue$/)
const files = require.context('./mods', false, /\.vue$/)
const modules = {}
files.keys().map((key) => {
  modules[files(key).default.name] = files(key).default || files(key)
})

export default {
  name: 'two',
  components: {
    List: () => import('./KeepComs/list'),
    Add: () => import('./KeepComs/add'),
    Detail: () => import('./KeepComs/detail'),

    comp1: () => import('./comList/com11'),
    comp2: () => import('./comList/com22'),
    comp3: () => import('./comList/com33'),
    ...modules,
  },
  props: {},
  data() {
    return {
      componentPage: 'List',
      params: {},
      comLists: [
        { id: 1, comps: 'comp1', title: '选项一', name: '1' },
        { id: 2, comps: 'comp2', title: '选项二', name: '2' },
        { id: 3, comps: 'comp3', title: '选项三', name: '3' },
      ],
      comListss: [
        { id: 11, comps: 'comp1', title: '选项一1', name: '11' },
        { id: 22, comps: 'comp2', title: '选项二2', name: '22' },
        { id: 33, comps: 'comp3', title: '选项三3', name: '33' },
      ],
      curName: '1',
      apps: [],
      curentName: '0',
      keyword: '',
      appsList: [],
      tabs: 0,
      timer: null,
      time: null,
    }
  },
  computed: {},
  watch: {
    appsList: {
      handler(newValue, old) {
        if (newValue) {
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.getPath()
  },
  methods: {
    getPath() {
      const files = require.context('./mods', false, /\.vue$/)
      files.keys().map((path, index) => {
        let { name: key, __file: pathFile } = files(path).default
        this.apps.push({
          index: index.toString(),
          key,
          pathFile: pathFile.replace('src/', '@/src/'),
          path: path.replace(/^\.(.+).vue$/g, '$1'),
        })
        console.log('this.apps', this.apps)
      })
    },

    inputSearch(e) {
      this.appsList = []
      this.apps?.filter((item) => {
        if (item.key.indexOf(this.keyword) > -1) this.appsList.push(item)
      })
      this.$nextTick(() => {
        this.tabs = 0
      })
    },

    changTabs(v) {
      this.tabs = v
      console.log(v)
    },

    changeSearch(e) {
      // console.log('e', e)
    },

    changeCom(e) {
      console.log('e', e)
    },

    changeComs(e) {
      console.log('e', e)
    },

    tabHanler(e) {
      console.log('e', e)
    },

    onChangeKeepLive(data) {
      console.log('data', data)
      if (data.type === 'list') {
        this.componentPage = 'List'
        this.$nextTick(() => {
          this.params = data.params
        })
      }

      if (data.type === 'add') {
        this.componentPage = 'Add'

        this.params = data.params
      }

      if (data.type === 'detail') {
        this.componentPage = 'Detail'
        this.params = data.params
      }
    },

    timerList() {
      this.timer = setInterval(() => {
        this.time = getInitTime(new Date())
      }, 3 * 1000)
    },

    starBtn() {
      this.time = getInitTime(new Date())
      this.timerList()
    },

    closeBtn() {
      clearInterval(this.timer)
      this.timer = null
      this.time = null
    },

    resetBtn() {
      clearInterval(this.timer)
      this.timer = null
      this.time = null
      this.timerList()
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
}
</script>

<style scoped lang="scss">
.twoPage {
  // height: 100%;
  .active {
    color: yellowgreen;
    background: pink;
  }

  .cursors {
    cursor: pointer;
  }

  .box {
    height: 50px;
    .tabss {
      display: inline-block;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
  }

  .width250 {
    width: 250px;
  }
}
</style>
